<template>
    <div class="main">
        <div class="top_box">
            <el-input style="width:200px" placeholder="搜索用户名称/手机号" v-model="keyword"></el-input>
            <!-- <el-cascader style="width:200px;margin-left:10px" ref="cascader" v-model="admin_id" :props="props" clearable
                placeholder="请选择管理中心/路段"></el-cascader> -->
            <div style="width:150px;margin-left:10px">
                <el-select v-if="!(role==18||role==19)" v-model="admin_id" placeholder="请选择管理中心">
                    <el-option v-for="item in managementCenter" :key="item.id" :label="item.nickname" :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <div style="width:260px;margin-left:10px">
                <el-date-picker style="width:260px" v-model="time" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
            </div>
            <div style="width:150px;margin-left:10px">
                <el-select v-model="department" placeholder="请选择部门">
                    <el-option v-for="item in departmentList" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <div style="width:170px;margin-left:10px">
                <el-select v-model="p_department_id" placeholder="请选择意见建议分类">
                    <el-option v-for="item in PDepartment" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <div style="width:170px;margin-left:10px">
                <el-select v-model="is_valid " placeholder="请选择是否有效工单">
                    <el-option label="有效工单" :value="1">
                    </el-option>
                    <el-option label="无效工单" :value="2">
                    </el-option>
                </el-select>
            </div>
			<div style="width:170px;margin-left:10px">
			    <el-select v-model="clstatus" placeholder="请选择工单状态">
			        <el-option v-for="(item,index) in clstatusList" :key="index" :label="item" :value="index">
			        </el-option>
			    </el-select>
			</div>
            <el-button type="warning" style="margin-left:10px" icon="el-icon-search" size="small" @click="getInfo">搜索</el-button>
            <el-button style="margin-left:10px" size="small" @click="reset" type="primary">重置</el-button>
            <el-button type="primary" style="margin-left:10px" icon="el-icon-upload" size="small " @click="leadingOut">导出</el-button>
        </div>

        <el-table :data="data" style="width: 100%" border height="100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column type="index" label="序号" width="100" align="center">
            </el-table-column>
            <el-table-column label="用户名称" width="120">
                <template slot-scope="{row}">
                    <el-tooltip class="item" effect="dark" :content="row.username" placement="top">
                        <div>{{ row.username }}</div>
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column prop="mobile" label="用户手机号" width="130">
            </el-table-column>
            <el-table-column prop="init_admin_name" label="初始管理中心" width="150">
            </el-table-column>
            <!-- <el-table-column prop="admin_name" label="管理中心名称"  width="100">
            </el-table-column> -->

            <el-table-column prop="department_name" label="部门名称" width="120">
            </el-table-column>
            <el-table-column prop="p_department_name" label="意见建议分类" width="130">
            </el-table-column>
            <el-table-column prop="road_number" label="路段编号" width="130">
            </el-table-column>
            <el-table-column label="路段名称" width="130">
                <template slot-scope="{row}">
                    <el-tooltip class="item" effect="dark" :content="row.road_name" placement="top">
                        <div>{{ row.road_name }}</div>
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column label="收费站/服务区" width="140">
                <template slot-scope="{row}">
                    <el-tooltip class="item" effect="dark" :content="row.p_road_name" placement="top">
                        <div>{{ row.p_road_name }}</div>
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column label="反馈内容" width="120">
                <template slot-scope="{row}">
                    <el-tooltip class="item" effect="dark" :content="row.content" placement="top">
                        <div>{{ row.content }}</div>
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column label="反馈图片" width="220">
                <template slot-scope="{row}">
                    <div class="imgs">
                        <div v-for="(item, index) in row.img" :key="index">
                            <el-image :preview-src-list="row.img" :src="item" v-if="item" style="width:60px;height:60px;margin-right:10px" />
                        </div>
                    </div>
                </template>
            </el-table-column>

            <el-table-column label="满意度" width="100">
                <template slot-scope="{row}">
                    {{ comType(row.type) }}
                </template>
            </el-table-column>

            <el-table-column prop="admin_name" label="处理工单管理中心" width="200">
            </el-table-column>
            <el-table-column label="工单状态" width="120">
                <template slot-scope="{row}">
                    <div :style="{ 'color': row.cl_status == 0 ? '#409eff' : row.cl_status == 1 ? '#e6a23c' : row.cl_status == 2 ? '#20932e' : row.cl_status == 3 ? '#f56c6c' : '#ab3450' }">
                        <el-tooltip class="item" effect="dark" :content="cl_status(row)" placement="top">
                            <div>{{ cl_status(row) }}</div>
                        </el-tooltip>

                    </div>
                </template>
                <!-- //cl_status==0中心处理1路网审核2处理完成3处理失败4处理不了提交路网 -->
            </el-table-column>
            <el-table-column label="创建时间" width="150">
                <template slot-scope="{row}">
                    {{ row.create_time != 0 ? comTime(row.create_time) : "" }}
                    <!-- {{ row.create_time | dateFormat }} -->
                </template>
            </el-table-column>
            <el-table-column label="处理时间" width="150">
                <template slot-scope="{row}">
                    <!-- {{ row.apply_time | dateFormat }} -->
                    {{ row.apply_time != 0 ? comTime(row.apply_time) : "" }}

                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="300" fixed="right">
                <template slot-scope="{ row }">
                    <div class="backfixed">
                        <el-button type="primary" @click="openDialog(row)">查看工单详情</el-button>
                        <el-button type="danger" style="margin:10px 5px" @click="wanderAbout(row)">流转信息</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <!-- 答题详情 -->
        <el-dialog title="工单详情" :visible.sync="dialogVisible" class="question-detail">
            <nswerDetails :popRow="popRow" :answer="answer" :imgs="imgs" />
        </el-dialog>
        <!-- 流转信息 -->
        <el-dialog title="流转信息" :visible.sync="dialogWanderAbout" width="80%" :show-close="false">
            <el-table :data="wanderAboutList" style="width: 100%" border>
                <el-table-column prop="send_nickname" label="处理人">
                </el-table-column>
                <el-table-column label="处理内容">
                    <template slot-scope="{row}">
                        <el-tooltip class="item" effect="dark" :content="row.cause" placement="top">
                            <div> {{ row.cause }}</div>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column label="处理凭证">
                    <template slot-scope="{row}">
                        <div v-for="(item,index) in row.img" :key="index">
                            <el-image :preview-src-list="[item]" :src="item" v-if="item" style="width:60px;height:60px" />
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="处理人状态">
                    <template slot-scope="{row}">
                        <div :style="{ 'color': row.status == 0 ? '#F56C6C' : '#67c23a' }">
                            {{ comLZStutas(row.status) }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="get_nickname" label="接收工单管理员">
                </el-table-column>
                <el-table-column label="处理内容">
                    <template slot-scope="{row}">
                        <el-tooltip class="item" effect="dark" :content="row.g_cause" placement="top">
                            <div> {{ row.g_cause }}</div>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column label="处理凭证">
                    <template slot-scope="{row}">
                        <div v-for="(item,index) in row.g_img" :key="index">
                            <el-image :preview-src-list="[item]" :src="item" v-if="item" style="width:60px;height:60px" />
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="状态">
                    <template slot-scope="{row}">
                        <div :style="{ 'color': row.cl_status == 0 ? '#F56C6C' : '#67c23a' }" v-if="row.get_nickname">
                            {{ comLZStutas(row.cl_status) }}
                        </div>

                        <div v-else>{{ '' }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="生成记录时间">
                    <template slot-scope="{row}">
                        {{ row.create_time != 0 ? comTime(row.create_time) : "" }}
                    </template>
                </el-table-column>
                <el-table-column label="处理时间">
                    <template slot-scope="{row}">
                        {{ row.handle_time != 0 ? comTime(row.handle_time) : "" }}
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
        <el-pagination class="main-pagination" :total="total" :current-page.sync="page" :page-size="limit" layout="prev, pager, next, jumper,total" @current-change="getInfo" hide-on-single-page></el-pagination>
    </div>
</template>

<script>
import {
    get, del, post
} from "@/assets/js/http.js";
import queryString from "qs";
export default {
    components: {
        "nswerDetails": () => import("@/components/nswerDetails")
    },
    data() {
        return {
            is_valid: "",
            total: 0,
            limit: 10,
            page: 1,
            keyword: "",
            time: "",
            admin_id: '',
            department: "",
            role: localStorage.getItem("role"),
            data: [],
            imgs: [],
            reply_img: [],
			clstatusList:['中心处理','路网审核','处理完成','处理失败','处理不了提交路网'],//cl_status==0中心处理1路网审核2处理完成3处理失败4处理不了提交路网
            dialogVisible: false,
            answer: [],
            popRow: [],
            departmentList: [],
            managementCenter: [],
            // 流转信息
            wanderAboutList: [],
            // 是否显示流转信息
            dialogWanderAbout: false,
            idList: [],
            PDepartment: [],
            p_department_id: "",
			clstatus:'',
            // props: {
            //     label: "nickname",
            //     value: "id",
            //     lazy: true,
            //     async lazyLoad(node, resolve) {
            //         const { level, value } = node;
            //         if (level === 0) {
            //             const result = await post({
            //                 url: "/admin/answer.Subject/admin_list",
            //                 data: {}
            //             });
            //             console.log(result, 'result')
            //             resolve(result);
            //         } 
            //         else if (level === 1) {
            //             const result = await post({
            //                 url: "/admin/answer.Road/index",
            //                 data: {
            //                     admin_id: value,
            //                     limit: 50,
            //                 }
            //             });

            //             result.data.forEach((item) => {
            //                 item.leaf = true
            //                 item.nickname = item.road_name
            //             });
            //             console.log(result)
            //             resolve(result.data);
            //         }
            //         // else if (level === 2) {
            //         //                    const result = await post({
            //         //                        url: "/api/common/getAreaList",
            //         //                        data: {
            //         //                            city_id: value
            //         //                        }
            //         //                    });
            //         //                    resolve(result);
            //         //                } else if (level === 3) {
            //         //                    const result = await post({
            //         //                        url: "/api/common/getStreetList",
            //         //                        data: {
            //         //                            area_id: value
            //         //                        }
            //         //                    });
            //         //                    result.forEach(item => (item.leaf = true));
            //         //                    resolve(result);
            //         //                }
            //     },
            // },
        }
    },
    filters: {
        //过滤器 用于格式化时间
        dateFormat: function (value) {
            var date = new Date(value * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
            var year = date.getFullYear();
            var month = ("0" + (date.getMonth() + 1)).slice(-2);
            var sdate = ("0" + date.getDate()).slice(-2);
            var hour = ("0" + date.getHours()).slice(-2);
            var minute = ("0" + date.getMinutes()).slice(-2);
            var second = ("0" + date.getSeconds()).slice(-2);
            // 拼接
            var result = year + "-" + month + "-" + sdate + " " + hour + ":" + minute //+ ":" + second;
            // 返回
            return result;
        },
    },
    methods: {
        getInfo(index = 1) {
            let time = []
            if (this.time.length != 0) {
                time = this.time.map(item => item / 1000)
            }
            post({
                url: "/admin/answer.Subject/work_order",
                data: {
                    page: index,
                    limit: this.limit,
                    type: 3,
                    keyword: this.keyword,
                    admin_id: this.admin_id,
                    road_id: '',
                    department: this.department,
                    time,
                    is_valid: this.is_valid,
                    p_department_id: this.p_department_id,
					cl_status:this.clstatus,
                },
                loading: true
            }).then(res => {
                this.data = res.data
                this.total = res.total          //总数
                res.data.forEach(item => {
                    let imgs = item.img.split("|")
                    item.img = imgs
                });
                res.data.forEach(item => {
                    let reply_img = item.reply_img.split("|")
                    item.reply_img = reply_img
                });
                this.data = res.data;

            })
        },
        onAreaChange() {
            // const checkedNodes = this.$refs.cascader.getCheckedNodes();
            // this.address = checkedNodes[0].pathLabels.join("");
        },
        getPDepartment() {
            post({
                url: "/admin/answer.Census/p_department"
            }).then(res => {
                this.PDepartment = res
            })
        },
        // 获取管理中心列表
        getManagementCenter() {
            post({
                url: "/admin/answer.Subject/admin_list"
            }).then(res => {
                this.managementCenter = res
            })
        },
        // 获取部门列表
        getDepartment() {
            post({
                url: "admin/answer.Road/department"
            }).then(res => {
                this.departmentList = res
            })
        },
        // 流转信息按钮
        wanderAbout(row) {
            post({
                url: "/admin/answer.Subject/wander_about",
                data: {
                    id: row.id
                }
            }).then(res => {
                console.log(res, "liuzhuanxinxi ");
                let data = res
                data.forEach(item => {
                    item.img = item.img ? item.img.split("|") : ""
                    item.g_img = item.g_img ? item.g_img.split("|") : ""
                })
                this.wanderAboutList = data
                this.dialogWanderAbout = true
            })
        },
        // 表格选中事件
        handleSelectionChange(e) {
            this.idList = e.map(res => res.id)
            console.log(this.idList);
        },
        // 重置
        reset() {
            this.keyword = ""
            this.admin_id = ""
            this.department = ""
            this.time = ""
            this.is_valid = ""
            this.p_department_id = ""
			this.clstatus = ""
            this.getInfo()

        },
        // 导出
        leadingOut() {
            let time = []
            if (this.time.length != 0) {
                time = this.time.map(item =>
                    item / 1000
                )
            }
            open("http://nhcj.app65.cn/api/realmerit/work_export?" + queryString.stringify({
                keyword: this.keyword,
                id: localStorage.getItem('id'),
                role: localStorage.getItem('role'),
                department_id: JSON.parse(localStorage.getItem('userList')).department_id,
                type: 3,
                // keyword: this.keyword,
                admin_id: this.admin_id,
                department: this.department,
                time,
                ids: this.idList,
                is_valid: this.is_valid,
                p_department_id: this.p_department_id,
				cl_status:this.clstatus,
            }))
            console.log(this.admin_id, "admin_id");
        },
        openDialog(row) {
            this.dialogVisible = true
            this.answer = row.answer
            this.popRow = row
            this.imgs = row.img
            this.reply_img = row.reply_img
        }
    },
    computed: {
        comType() {
            return (data) => {
                if (data == 1) {
                    return "满意"
                } else if (data == 2) {
                    return "一般"
                } else {
                    return "不满意"
                }
            }
        },
        comTime() {
            return (value) => {
                var date = new Date(value * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
                var year = date.getFullYear();
                var month = ("0" + (date.getMonth() + 1)).slice(-2);
                var sdate = ("0" + date.getDate()).slice(-2);
                var hour = ("0" + date.getHours()).slice(-2);
                var minute = ("0" + date.getMinutes()).slice(-2);
                var second = ("0" + date.getSeconds()).slice(-2);
                // 拼接
                var result = year + "-" + month + "-" + sdate + " " + hour + ":" + minute //+ ":" + second;
                // 返回
                return result;
            }
        },
        comClStutas() {
            return (item) => {
                switch (item) {
                    case 0:
                        return "中心待处理"
                    case 1:
                        return "路网审核"
                    case 2:
                        return "处理完成"
                    case 3:
                        return "其他"
                    case 4:
                        return "处理不了提交路网"
                }
            }
        },
        comLZStutas() {
            return (item) => {
                switch (item) {
                    case 0:
                        return "待处理"
                    case 1:
                        return "已处理"
                }
            }
        },
        cl_status() {
            // {{ row.cl_status == 0 ? '管理中心' + row.department_name + '待处理' : row.cl_status == 1 ? '路网' +
            //     row.department_name + '待审核' : row.cl_status == 2 ? '处理完成' : row.cl_status == 3 ? '处理失败' : '已提交路网审核' }}
            return (data) => {
                if (data.cl_status == 0) {
                    // return data.admin_name + data.department_name + '待处理'
                    return data.init_admin_name + data.department_name + '待处理'

                } else if (data.cl_status == 1) {
                    return "路网" + data.department_name + '待审核'
                } else if (data.cl_status == 2) {
                    return "处理完成"
                } else if (data.cl_status == 3) {
                    return "其他"
                } else if (data.cl_status == 5) {
                    return "管理中心待审核"
                }
                else {
                    return "已提交路网审核"
                }
            }

        }
    },
    mounted() {
        this.getInfo()
        this.getManagementCenter()
        this.getDepartment()
        this.getPDepartment()
    }
}
</script>


<style lang="scss" scoped>
@import "../../assets/css/info.scss";

.type {
    font-size: 25px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #1067b5;
    margin-top: 40px;

    .type_name {
        background: linear-gradient(90deg, #cae4ff, #ffffff);
        border-radius: 10px;
        font-size: 18px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #222222;
        padding: 14px;
        margin-top: 20px;
        margin-bottom: 10px;
    }
}

.imgs {
    display: flex;
}

::v-deep .is-checked > .el-radio__label {
    color: #409eff !important;
}

::v-deep .is-checked > .el-radio__inner {
    color: #409eff !important;
    background-color: #409eff !important;
    border-color: #e4e7ed !important;
}

::v-deep .cell div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

::v-deep .el-date-picker {
    width: 100%;
}

::v-deep .cell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

::v-deep .cell div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>